<template>
  <div class="user-edit-box">
    <header>产品管理</header>
    <main>
      <el-form :model="obj" :rules="rules" ref="obj" label-width="80px">
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="产品名字" prop="name">
              <el-input v-model="obj.name" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="成本" prop="pure_price">
              <el-input v-model="obj.pure_price" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="售价" prop="price">
              <el-input v-model="obj.price" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="优惠价格" prop="discount">
              <el-input v-model="obj.discount" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="限购数量" prop="limit">
              <el-input v-model="obj.limit" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="产地" prop="place">
              <el-input v-model="obj.place" style="width: 202px" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="状态" prop="state">
              <el-select v-model="obj.state" placeholder="请选择状态">
                <el-option label="新增" value="new"></el-option>
                <el-option label="销售中" value="sales"></el-option>
                <el-option label="下架" value="finish"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="单位" prop="unit">
              <el-select v-model="obj.unit" placeholder="请选择单位">
                <el-option label="片" value="片"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="品级" prop="level">
              <el-select
                style="width: 202px"
                v-model="obj.level"
                placeholder="请选择品级"
              >
                <el-option label="A" value="A"></el-option>
                <el-option label="AA" value="AA"></el-option>
                <el-option label="AAA" value="AAA"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="类型" prop="type">
              <el-select v-model="obj.type" placeholder="请选择类型">
                <el-option label="中药" value="中药"></el-option>
                <el-option label="西药" value="西药"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="品牌" prop="brand">
              <el-select
                style="width: 202px"
                v-model="obj.brand"
                placeholder="请选择品牌"
              >
                <el-option label="华瑞" value="华瑞"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="上架时间" prop="sale_stime">
              <el-date-picker
                @change="saleStimeEvt"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                v-model="obj.sale_stime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="下架时间" prop="sale_etime">
              <el-date-picker
                type="date"
                @change="saleEtimeEvt"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-model="obj.sale_etime"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="图片">
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :md="12" :lg="8" :xl="6">
            <el-form-item label="留言">
              <el-input type="textarea" v-model="obj.remark" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            style="margin-top: 50px"
            type="primary"
            @click="submitForm('enter')"
            >提交</el-button
          >
          <el-button plain @click="submitForm('remove')">取消</el-button>
        </el-form-item>
      </el-form>
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: "",
      obj: {
        list: [],
        name: "",
        state: "",
        pure_price: 0,
        price: 0,
        discount: 0,
        limit: 0,
        sale_stime: "",
        sale_etime: "",
        type: "",
        unit: "",
        level: "",
        place: "",
        brand: "",
        detail: "/path/icon.png",
        banner: "/path/test.png",
        remark: "",
      },
      positionArr: [],
      deptArr: [],
      rules: {
        pure_price: [
          { required: true, message: "请输入成本价格", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        discount: [
          { required: true, message: "请输入优惠价格", trigger: "blur" },
        ],
        limit: [{ required: true, message: "请输入限购数量", trigger: "blur" }],
        state: [{ required: true, }],
        unit: [{ required: true, }],
        level: [{ required: true, }],
        type: [{ required: true, }],
        sale_stime: [{ required: true,}],
        sale_etime: [{ required: true,}],
        brand: [{ required: true,}],
      },
    };
  },
  created() {
    if (!!this.$route.query.data) {
      this.obj = { ...this.obj, ...this.$route.query.data };
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    saleStimeEvt(data) {
      this.obj.sale_stime = data;
    },
    saleEtimeEvt(data) {
      this.obj.sale_etime = data;
    },
    submitForm(type) {
      if (type === "remove") {
        for (let it in this.obj) {
          if (it !== "detail" && it !== "banner") this.obj[it] = "";
        }
        return;
      }
      let state = 0;
      for (let it in this.obj) {
        console.log(this.obj[it]);
        debugger;
        if (this.obj[it] === "" && it !== "remark" && it !== 'list') state = 1;
      }
      console.log(state);
      if (state === 1) return;
      console.log(this.obj);
      this.$message({
        message: "添加成功",
        type: "success",
      });
      for (let it in this.obj) {
        if (it !== "detail" && it !== "banner") this.obj[it] = "";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.el-icon-plus {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
.avatar-uploader {
  .el-upload:hover {
    border-color: #409eff;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.user-edit-box {
  background: #fff;
  height: calc(100% - 48px);
  padding: 10px;
  header {
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
  }
  main {
    height: calc(100% - 48px);
    padding: 20px;
  }
}
</style>